<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="/easyui/demo.css">
	<script type="text/javascript" src="/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<table id="dg" class="easyui-datagrid" style="width:700px;height:250px"
	   data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:'#tb'">
</table>

<div id="tb" style="padding:2px 5px;">
	关键词: <input id="input_word" class="easyui-textbox" style="width:120px">
	状态:
	<select id="sc_status" class="easyui-combobox" panelHeight="auto" style="width:100px">
		<option value="">全部</option>
		<option value="0">正常</option>
		<option value="1">已删除</option>
	</select>
	<a id="btn_search" href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>

<div id="win"></div>

</body>

<script>

	function opt_delete(circleId) {
        var url =  "/circle/"+circleId+"/delete";
        $.ajax({
            type: "POST",
            url: url,
            success: function(data){
                console.info(data);
                if(data.code == 1000){
                    $('#dg').datagrid('reload');
                    //location.replace(location.href);
                }
            }
        });
    }

    function opt_restore(circleId) {
        var url =  "/circle/"+circleId+"/valid";
        $.ajax({
            type: "POST",
            url: url,
            success: function(data){
                console.info(data);
                if(data.code == 1000){
                    $('#dg').datagrid('reload');
                    //location.replace(location.href);
                }
            }
        });
    }


    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    };

    $('#dg').datagrid({
        url:'/circle/circles',
        pagination : true,//分页控件
        pageList: [10, 20, 30, 40, 50],
        fit: true,   //自适应大小
        border:false,
        nowrap: true,//数据长度超出列宽时将会自动截取。
        rownumbers:true,//行号
        fitColumns:true,//自动使列适应表格宽度以防止出现水平滚动。
        columns:[[
            {field:'circleId',title:'圈子ID',width:100},
            {field:'circleName',title:'圈子名称',width:100},
            {field:'userName',title:'创建人',width:100},
            {field:'createTime',title:'创建时间',width:120,formatter: function(value,row,index){
                return formatDateTime(value);
            }},
            {field:'memberCount',title:'人数',width:50},
            {field:'isdelete',title:'是否已删除',width:50,formatter: function(value,row,index){
                if (value == 0){
                    return "否";
                } else {
                    return "是";
                }
            }},
            {field:'updateTime',title:'最后更新',width:120,formatter: function(value,row,index){
                return formatDateTime(value);
            }},
            {field:'id',title:'操作',width:100,formatter: function(value,row,index){
                return '<a href="#" onclick="opt_restore('+row.circleId+')">恢复</a>'+'  '+'<a href="#" onclick="opt_delete('+row.circleId+')">彻底删除</a>';
            }}
        ]],
        onDblClickRow:function(index,row){
            var url = "/circle/"+row.circleId+"/users.html";
            var title = "["+row.circleName+"]中的成员列表"
            var content = '<iframe src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>';
            $('#win').window({
				title: title,
                content: content,
                maximized: true,
                modal:true
            });
        }
    });

    $("#btn_search").on('click', function(){

        var circleName = $('#input_word').textbox('getValue');
		var status = $('#sc_status').combobox('getValue');
        $('#dg').datagrid('load', {
            circleName: circleName,
            status: status
        });
	})
</script>
</html>